<template>
    <div class="productBox">
      <div style="box-sizing: border-box;padding:0 5%;z-index: 100;background: #fff;position: fixed;top:0;left:0;right: 0;height: 80rpx">
        <van-button type="default" size="small" icon="home-o" style="margin-right: 30rpx" @click="goHome" v-if="typeArr.length!=1">返回顶级分类</van-button>
        <van-button type="info" size="small" @click="goBack" icon="arrow-left" v-if="typeArr.length!=1">返回上一级</van-button>
        <van-button type="primary" size="small" icon="upgrade" style="margin-left: 30rpx" v-if="getEditData.length>1" @click="submitAll">批量上传</van-button>
      </div>
      <template v-if="typeArr.length!=1">
        <div class="weui-cells__title">上级分类</div>
        <div class="imgBox" style="background: #fff">
          <van-panel >
            <div class="img"   >
              <img :src="parentImg.imgUrl" alt="" model="aspectFit" @click="goDetail(detail)">
               <p style="padding:10rpx 0;white-space: normal;text-overflow: ellipsis;overflow: hidden;">{{parentImg.description?parentImg.description:'暂未填写'}}

               </p>
            </div>
          </van-panel>
        </div>
          <div class="weui-cells__title">下级分类</div>
      </template>

      <van-panel >
        <div class="imgBox">
          <productType
            ref="productType"
            @removeItem="removeItemFun"
            v-for="(item,index) in detailListCopy"
            :pid="id"
            :dataLength="dataLength"
            @getParams="getParamsFun"
            @changeDom="getListFun"
            @changeData="changeDataFun"
            @delChangeDom="delChangeDomFun"
            :key="index"
            :index="index"
            :detail="item">

          </productType>
        </div>

      </van-panel>
      <van-dialog id="van-dialog" />
    </div>
</template>

<script>
  import productType from '../../components/productType.vue'
  import Dialog from '../../../static/vant-weapp/dist/dialog/dialog'
  export default {
    name: 'index',
    data () {
      return {
          typeArr:[],
        dataLength:0,
          detailList: [{imgUrl: require('../../../static/images/pro1.jpg'), defaultImg: require('../../../static/images/pro1.jpg'), id: '',isClick:false,isEdit:false,description:"敬请期待"},
              {imgUrl: require('../../../static/images/pro2.jpg'),defaultImg: require('../../../static/images/pro2.jpg'), id: '',isClick:false,isEdit:false,description:"敬请期待"},
              {imgUrl: require('../../../static/images/pro3.jpg'),defaultImg: require('../../../static/images/pro3.jpg'), id: '',isClick:false,isEdit:false,description:"敬请期待"},
              {imgUrl: require('../../../static/images/pro4.jpg'),defaultImg: require('../../../static/images/pro4.jpg'), id: '',isClick:false,isEdit:false,description:"敬请期待"},
              {imgUrl: require('../../../static/images/pro5.jpg'),defaultImg: require('../../../static/images/pro5.jpg'), id: '',isClick:false,isEdit:false,description:"敬请期待"},
              {imgUrl: require('../../../static/images/pro6.jpg'),defaultImg: require('../../../static/images/pro6.jpg'), id: '',isClick:false,isEdit:false,description:"敬请期待"},
          ],
          result:[],
          detailListCopy:[

          ],
          clickParent:[],
          parentImg:{},
          isVip:0,
          list:[],
          pageNum:1,
          pageSize:10,
         editData:[],
          index:0,
          id:""
      }
    },
    computed:{
      getEditData(){
        let arr= this.detailListCopy.filter((item)=>{
              return item.isEdit==true;
            })
            return arr;
      }
    },
    components: {
        productType
    },
      onPullDownRefresh(){
     //     console.log('down')
          // if(this.result.length){
              this.pageNum=1;
          // }
          if(this.id){
              this.getChildData(this.id)
          }else{
              this.getList(this.id)
          }

      },
      onReachBottom () {
          // wx.showNavigationBarLoading()
       //   console.log('pull')
          if(this.result.length){
              this.pageNum++;
          }
          if(this.id){
              this.getChildData(this.id)
          }else{
              this.getList(this.id)
          }

          // wx.stopPullDownRefresh()
      },
    onLoad(id){
      this.id=id.id
    },
      onReady(){
        this.typeArr=[];
          this.typeArr.push(0);
           this.getList(0)
        // this.detailListCopy=[
        //   {imgUrl: require('../../../static/images/pro1.jpg'),defaultImg: require('../../../static/images/pro1.jpg'), id: '',isClick:false,isEdit:false,description:"敬请期待"},
        //   {imgUrl: require('../../../static/images/pro2.jpg'),defaultImg: require('../../../static/images/pro2.jpg'), id: '',isClick:false,isEdit:false,description:"敬请期待"},
        //   {imgUrl: require('../../../static/images/pro3.jpg'),defaultImg: require('../../../static/images/pro3.jpg'), id: '',isClick:false,isEdit:false,description:"敬请期待"},
        //   {imgUrl: require('../../../static/images/pro4.jpg'),defaultImg: require('../../../static/images/pro4.jpg'), id: '',isClick:false,isEdit:false,description:"敬请期待"},
        //   {imgUrl: require('../../../static/images/pro5.jpg'),defaultImg: require('../../../static/images/pro5.jpg'), id: '',isClick:false,isEdit:false,description:"敬请期待"},
        //   {imgUrl: require('../../../static/images/pro6.jpg'),defaultImg: require('../../../static/images/pro6.jpg'), id: '',isClick:false,isEdit:false,description:"敬请期待"},
        // ],

      },
      onHide(){
        // this.detailListCopy=null;
      },
    onShow () {
      wx.setNavigationBarTitle({
        title: '产品分类'
      })
        this.pageNum=1;
      this.isVip=wx.getStorageSync('isVip');

    },
    methods: {
      delChangeDomFun(pid){//删除后回调
        this.pageNum=1;
        let cartId = wx.getStorageSync('cartId')
        if(pid){
          this.$http.request({
            method: 'post',
            url: `/api/material/getChildPList`,
            body: {
              cardId:cartId,
              pageNum:this.pageNum,
              pageSize:this.pageSize,
              pid:pid
            }
          }).then((data) => {
            if (data.code == 200) {
              this.detailListCopy=data.data.list;
              this.detailListCopy.unshift({imgUrl:"", id: '',isClick:false,isEdit:true,description:""})
            }else{
              wx.showToast({
                title: `${data.message}`,
                icon: 'none',
                duration: 2000
              })
            }
          })
        }else{
          this.$http.request({
            method: 'post',
            url: `/api/material/getTopPList`,
            body: {
              cardId:cartId,
              pageNum:this.pageNum,
              pageSize:this.pageSize,
              pid:pid
            }
          }).then((data) => {
            if (data.code == 200) {
              this.detailListCopy=data.data.list;
              this.detailListCopy.unshift({imgUrl:"", id: '',isClick:false,isEdit:true,description:""})
            }else{
              wx.showToast({
                title: `${data.message}`,
                icon: 'none',
                duration: 2000
              })
            }
          })
        }

      },
      removeItemFun(index){
        this.detailListCopy.splice(index,1)
      },
      submitAll(){//批量提交
      let editData=this.detailListCopy.filter((item)=>{
            return item.isEdit==true;
          })
       let cartId = wx.getStorageSync('cartId'),
        userId =  wx.getStorageSync('userId')
         this.$http.request({
             method: 'post',
             url: '/api/material/add',
             body: {
                 cardId: cartId,
                 imgList:editData&&editData.slice(1,editData.length),
                 pid:this.id||0,
               userId:userId
             }
         }).then((data) => {
             if (data.code == 200) {
                 wx.showToast({
                     title: '上传成功!',
                     icon: 'success',
                     duration: 2000,
                     success: () => {
                       if(this.id){
                         this.getChildData(this.id)
                       }else{
                         this.getList(0)
                       }

                         this.editData=[];
                         //console.log(this.detail)
                         // that.$emit('changeDom',this.pid)
                     }
                 })
             }
         })
      },
        getParamsFun(data){
          this.detailListCopy.splice(1,0,...data)
          // this.detailListCopy=data.concat(this.detailListCopy);
          console.log(this.detailListCopy,data)
          this.editData=this.detailListCopy.filter((item)=>{
            return item.isEdit==true;
          })
          // this.detailListCopy.splice( this.detailListCopy.length-1,1)
        },
        goHome(){
        this.detailList.forEach((a,i)=>{
          this.detailListCopy.push(a);
        })
          this.pageNum=1;
          this.editData=[];
          this.id=0;
            this.getList(0)
            this.typeArr=[0];
        },
      goBack(){
       this.detailList.forEach((a,i)=>{
         this.detailListCopy.push(a);
       })
        this.editData=[];
        this.index--;
        this.pageNum=1;
        this.typeArr.splice(this.typeArr.length-1,1)
        this.clickParent.splice(this.clickParent.length-1,1);
        this.parentImg=this.clickParent[this.clickParent.length-1];
        let index=this.typeArr[this.typeArr.length-1];
        this.id=index;
       // console.log(index)
        if(index){
          this.getChildData(index)
        }else{
          this.getList(0)
        }

      },
      changeDataFun(item){//点击图片进入下一层

        if(this.isVip){
        //  console.log(item)
          this.parentImg=item;
          let id=item.id;
          this.detailListCopy=[];
          this.index++;
          this.pageNum=1;
          this.id=id;
          this.clickParent.push(item);
          this.typeArr.push(id);
          this.getChildData(id);
        //  console.log(this.typeArr,this.index)
        }else{
          Dialog.confirm({
            title: '提示',
            message: '分类功能需开通VIP,是否进行付费?'
          }).then(() => {
            wx.navigateTo({ url: `/pages/pay/main` })
          }).catch(() => {
            // on cancel
          });
        }

      },
      getChildData(id,index){//获取子集
        let cartId = wx.getStorageSync('cartId')
        this.$http.request({
          method: 'post',
          url: `/api/material/getChildPList`,
          body: {
            cardId:cartId,
            pageNum:this.pageNum,
            pageSize:this.pageSize,
            pid:id||0
          }
        }).then((data) => {
          if (data.code == 200) {
            wx.stopPullDownRefresh()
            this.result=data.data.list;
            if (this.pageNum > 1) {
              this.detailListCopy.push(... data.data.list)

            }else{
              if( data.data.list.length){
              //  console.log(this.editData.length,index)
                if(index||index==0){
                  if(this.editData.length){

                    this.editData.splice(index,1)
                 //   console.log( this.editData)
                    this.detailListCopy = this.editData.concat(data.data.list);
                 //   console.log( this.detailListCopy)
                  }
                } else{
                  this.detailListCopy =data.data.list;
                  this.detailListCopy.unshift({imgUrl:"", id: '',isClick:false,isEdit:true,description:""})
                }
              }else{
                if(!this.detailListCopy.length){
                  this.detailListCopy.unshift({imgUrl:"", id: '',isClick:false,isEdit:true,description:""})
                }

              }


            }
            // let arr=this.detailListCopy.filter((item)=>{
            //   return item.imgUrl==''
            // })
            // if(!arr.length){
            //   this.detailListCopy.push({imgUrl:"", id: '',isClick:false,isEdit:true,description:""})
            // }

          } else {
            wx.showToast({
              title: `${data.message}`,
              icon: 'none',
              duration: 2000
            })
          }
        }).catch((err) => {
          // this.isCart = false
        })
      },
        getListFun(pid,index){
            this.pageNum=1;
         // console.log(this.detailListCopy)
          if(pid){
            // this.detailListCopy=[];
            this.getChildData(pid,index)
          }else{
            this.getList(pid,index)
          }

        },
       getList(id,index){

           let cartId = wx.getStorageSync('cartId')
           this.$http.request({
               method: 'post',
               url: `/api/material/getTopPList`,
               body: {
                   cardId:cartId,
                   pageNum:this.pageNum,
                   pageSize:this.pageSize,
                   pid:id
               }
           }).then((data) => {
               if (data.code == 200) {
                 wx.stopPullDownRefresh()
                   this.result=data.data.list;
                   this.list = data.data.list;
                    this.dataLength=data.data.totalCount;
                   // this.list.forEach((a,i)=>{
                   //     a.detailImg=a.imgUrl
                   // })
                   if (this.pageNum > 1) {
                       this.detailListCopy.push(... data.data.list)

                   }else{

                       if(this.list.length){

                         // this.detailListCopy=this.list;
                         // this.detailListCopy.push({imgUrl:"", id: '',isClick:false,isEdit:true,description:""})
                         if(index||index==0){
                           if(this.editData.length){

                             this.editData.splice(index,1)

                             this.detailListCopy = this.editData.concat(data.data.list);
                            // console.log( this.editData)
                           }
                         }else{
                           this.detailListCopy =data.data.list;
                           this.detailListCopy.unshift({imgUrl:"", id: '',isClick:false,isEdit:true,description:""})
                         }

                       // console.log(this.detailListCopy)


                        // this.detailListCopy=this.list;
                        // this.detailListCopy.push({imgUrl:"", id: '',isClick:false,isEdit:true,description:""})
                         // this.list.forEach((a,b)=>{
                         //   for(let i=0;i<this.detailListCopy.length;i++){
                         //     if(this.detailListCopy[i].defaultImg==a.defaultImg){
                         //       this.detailListCopy[i]=a;
                         //     }else{
                         //       this.detailListCopy.push(a)
                         //     }
                         //   }

                         // })
                        // if( this.list.length<=6){
                        //   console.log(this.detailListCopy)
                        //   for(let i=0;i<this.detailListCopy.length;i++){
                        //     this.list.forEach((a,b)=>{

                        //       if(this.detailListCopy[i].defaultImg==a.defaultImg){
                        //         this.detailListCopy[i]=a;
                        //       }else{
                        //         this.detailListCopy.push(a)
                        //       }
                        //     })

                        //   }

                        // }
                        // else{

                        //   let hasDetailArr=this.list.filter((item)=>{
                        //     return item.defaultImg!=""
                        //   })
                        //   let noHasDetailArr=this.list.filter((item)=>{
                        //     return item.defaultImg==""
                        //   })

                        //   // for(let i=0;i<this.detailListCopy.length;i++){
                        //   //   hasDetailArr.forEach((a,b)=>{

                        //   //     if(this.detailListCopy[i].defaultImg==a.defaultImg){
                        //   //       this.detailListCopy[i]=a;
                        //   //     }else{
                        //   //       this.detailListCopy.push(a)
                        //   //     }
                        //   //   })

                        //   // }
                        //    this.detailListCopy=[...hasDetailArr,...noHasDetailArr]
                        //  console.log(this.detailListCopy)
                        // }


                          //  if(this.list.length<6){
                          //
                          //      let arr=this.detailList.slice(0,6-this.list.length)
                          //      console.log(arr)
                          //      this.detailListCopy=this.list.concat(arr)
                          //  }else{
                          //      if(this.list.length==6){
                          //          this.detailListCopy=this.list
                          //          this.detailListCopy.push({imgUrl:"", id: '',isClick:false,isEdit:true,description:""})
                          //      }else{
                          //          this.detailListCopy=this.list
                          //          this.detailListCopy.push({imgUrl:"", id: '',isClick:false,isEdit:true,description:""})
                          //      }
                          //
                          //
                          //
                          //  }
                       }else{

                         if(!this.detailListCopy.length){
                           this.detailListCopy.push({imgUrl:"", id: '',isClick:false,isEdit:true,description:""})
                         }
                       }
                     // this.detailListCopy.push({imgUrl:"", id: '',isClick:false,isEdit:true,description:""})
                       // let arr=this.detailListCopy.filter((item)=>{
                       //   return item.imgUrl==''
                       // })
                       // if(!arr.length){

                       // }
                       // else{
                         // this.detailList.forEach((a,i)=>{
                         //   this.detailListCopy.push(a);
                         // })
                           // this.detailListCopy=[
                           //     {imgUrl: require('../../../static/images/pro1.jpg'),defaultImg: require('../../../static/images/pro1.jpg'), id: '',isClick:false,isEdit:false,description:"敬请期待"},
                           //     {imgUrl: require('../../../static/images/pro2.jpg'),defaultImg: require('../../../static/images/pro2.jpg'), id: '',isClick:false,isEdit:false,description:"敬请期待"},
                           //     {imgUrl: require('../../../static/images/pro3.jpg'),defaultImg: require('../../../static/images/pro3.jpg'), id: '',isClick:false,isEdit:false,description:"敬请期待"},
                           //     {imgUrl: require('../../../static/images/pro4.jpg'),defaultImg: require('../../../static/images/pro4.jpg'), id: '',isClick:false,isEdit:false,description:"敬请期待"},
                           //     {imgUrl: require('../../../static/images/pro5.jpg'),defaultImg: require('../../../static/images/pro5.jpg'), id: '',isClick:false,isEdit:false,description:"敬请期待"},
                           //     {imgUrl: require('../../../static/images/pro6.jpg'),defaultImg: require('../../../static/images/pro6.jpg'), id: '',isClick:false,isEdit:false,description:"敬请期待"},
                           // ]
                       // }

                   }

               } else {
                   wx.showToast({
                       title: `${data.message}`,
                       icon: 'none',
                       duration: 2000
                   })
               }
           }).catch((err) => {
               // this.isCart = false
           })
       },
        deepCopy(obj) {
            // 只拷贝对象
            if (typeof obj !== 'object') return;
            // 根据obj的类型判断是新建一个数组还是一个对象
            var newObj = obj instanceof Array ? [] : {};
            for (var key in obj) {
                // 遍历obj,并且判断是obj的属性才拷贝
                if (obj.hasOwnProperty(key)) {
                    // 判断属性值的类型，如果是对象递归调用深拷贝
                    newObj[key] = typeof obj[key] === 'object' ? this.deepCopy(obj[key]) : obj[key];
                }
            }
            return newObj;
        }

    }
  }
</script>
<style>
  .productBox ._van-panel{
    box-sizing: border-box;
    /*padding:2%;*/
  }
  .img .weui-uploader__file_status:before{
    background-color:transparent ;
  }
</style>
<style scoped>
  .imgBox{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 5%;

  }
  .img{
    width: 45%;
    text-align: center;
    margin-bottom: 40rpx;
    box-sizing: border-box;
    padding-bottom: 10rpx;
    box-shadow: 1px 1px 2px #999;
    border:1px solid transparent;
    border-radius: 10rpx;
  }
  .img.active{
    border-color: rgb(61,176,243);
    border-radius: 10rpx;
  }
  .img img{
    max-width: 100%;
    height:400rpx;
  }
   .productBox{
     width: 100%;
     height: 100%;
     box-sizing: border-box;
     padding-top: 80rpx;
     /*background-image: #fff;*/
   }
</style>
                                                 
